<div id="loader">
    <svg width="60" height="60" viewBox="0 0 620 436" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M264.335 416.59C251.515 429.41 234.712 435.814 217.913 435.814C201.111 435.814 184.308 429.41 171.484 416.586L19.2272 264.325C-6.40907 238.693 -6.40907 197.118 19.2272 171.482L151.686 39.023C107.299 91.3271 109.789 169.825 159.161 219.198C161.738 221.775 164.387 224.216 167.119 226.534L264.327 323.742C289.967 349.382 289.967 390.953 264.335 416.59Z" fill="url(#paint0_linear_407_3)"/>
        <path d="M158.19 218.214C108.817 168.841 107.299 91.3272 151.686 39.0232L167.286 23.4231C178.258 14.1037 190.385 6.85933 203.15 1.67392C224.453 -3.22473 247.732 2.62969 264.327 19.2254C277.143 32.0455 283.555 48.8523 283.555 65.6551C283.555 82.4578 277.151 99.2566 264.335 112.077L158.496 217.912L158.19 218.214" fill="url(#paint1_linear_407_3)"/>
        <path d="M159.161 30.9024C161.79 28.2738 164.502 25.7807 167.286 23.423L151.686 39.023C154.048 36.2352 156.537 33.5309 159.161 30.9024Z" fill="#141622"/>
        <path d="M355.669 19.2254C368.485 6.40524 385.288 0.00114294 402.091 0.00114294C418.889 0.00114294 435.692 6.40525 448.516 19.2294L600.773 171.486C626.409 197.122 626.409 238.697 600.773 264.329L468.314 396.792C512.705 344.488 510.211 265.99 460.839 216.617C458.262 214.04 455.613 211.599 452.881 209.281L355.673 112.073C330.033 86.4325 330.033 44.8577 355.669 19.2254Z" fill="url(#paint2_linear_407_3)"/>
        <path d="M461.747 217.537C511.12 266.91 512.705 344.488 468.314 396.792L452.714 412.392C441.742 421.707 429.615 428.956 416.85 434.141C395.547 439.04 372.269 433.185 355.673 416.59C342.857 403.769 336.445 386.963 336.445 370.16C336.445 353.357 342.849 336.554 355.669 323.738L461.504 217.903L461.747 217.537" fill="url(#paint3_linear_407_3)"/>
        <path d="M460.839 404.913C458.21 407.541 455.498 410.034 452.714 412.392L468.314 396.792C465.953 399.58 463.467 402.284 460.839 404.913Z" fill="#141622"/>
        <defs>
            <linearGradient id="paint0_linear_407_3" x1="0" y1="435.814" x2="375.401" y2="167.541" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FAB2FF"/>
                <stop offset="1" stop-color="#1904E5"/>
            </linearGradient>
            <linearGradient id="paint1_linear_407_3" x1="264.331" y1="19.2294" x2="111.769" y2="171.792" gradientUnits="userSpaceOnUse">
                <stop stop-color="#5A31B2"/>
                <stop offset="1" stop-color="#141622"/>
            </linearGradient>
            <linearGradient id="paint2_linear_407_3" x1="336.442" y1="396.792" x2="711.843" y2="128.52" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FAB2FF"/>
                <stop offset="1" stop-color="#1904E5"/>
            </linearGradient>
            <linearGradient id="paint3_linear_407_3" x1="355.641" y1="416.554" x2="508.204" y2="263.991" gradientUnits="userSpaceOnUse">
                <stop stop-color="#5A31B3"/>
                <stop offset="1" stop-color="#141622"/>
            </linearGradient>
        </defs>
    </svg>
</div>

<script>
var scheme = localStorage.getItem('vueuse-color-scheme') || 'light';

var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

if (scheme === 'auto' && prefersDark) {
    scheme = 'dark';
}

document.getElementById('loader').style.backgroundColor = scheme === 'dark' ? '#09090B' : 'white';
</script>

<style>
html, body {
    margin:0;
    padding:0;
}

#loader {
    width:100%;
    height:100%;
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
